<template>
	<el-table class="baseTable" :data="datalist" stripe height="auto">
		<el-table-column align="center" header-align="center" :label="item.name" v-for="(item,index) in tableTitle" :key="index">
			<template slot-scope="dataItem">
				<span v-if="item.key!=='control' && item.key!=='level' && item.key!=='status' && item.key!=='isWork'">{{dataItem.row[item.key]}}</span>

				<span v-if="item.key=='status'">
					<span>{{dataItem.row.status? '打开': '关闭'}}</span>
				</span>
				<span v-if="item.key=='isWork'">
					<span class="gray" :class="{green: dataItem.row.isWork=='充电中' }">{{dataItem.row.isWork}}</span>
				</span>

				<span v-if="item.key=='level'">
					<i class="icon el-icon-caret-left" @click="dataItem.row.level>1 && dataItem.row.status? dataItem.row.level--: dataItem.row.level"></i>
					<i class="lightLevel" :class="{blue: dataItem.row.status}">{{dataItem.row.level}}</i>
					<i class="icon el-icon-caret-right" @click="dataItem.row.level<4 && dataItem.row.status? dataItem.row.level++: dataItem.row.level"></i>
				</span>

				<el-switch
				  v-if="item.key=='control'"
				  active-color="#13ce66"
				  v-model="dataItem.row.control"
				  @change="switchChange(dataItem.row.control,dataItem.$index)">
				</el-switch>
			</template>
		</el-table-column>
	</el-table>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		props: {
			tableTitle: {
				type: Array,
				default() {
					return [{}]
				}
			},
			datalist: {
				type: Array,
				default() {
					return [{}]
				}
			},
			fn: {
				type: Function,
				default: null
			},
			fn2: {
				type: Function,
				default: null
			}
		},
		watch: {
			tableTitle: {
				deep: true,
				handler(newValue) {
					console.log(newValue)
				}
			}
		},
		methods: {
			increase(item) {
				console.log(item)
			},
			decrease(item) {
				console.log(item)
			},
			switchChange(isLightOn,index) {
				this.fn(isLightOn,index)
			}
		}
	}
</script>
<style>
	.iList-content-table {
		background-color: #fff;
		box-shadow: 5px 5px 5px #888;
		height: 800px;
	}
	.iList-content-table .el-table__row .el-table_1_column_2 {
		color: #29bd8b;	
	}
	.baseTable .el-table td {
	}

	.baseTable .el-button {
		height: 32px;
		line-height: 0;
	}
	.baseTable i {
		font-style: normal;
		font-size: 20px;
	}
	.baseTable .icon {
		margin: 0 10px;
	}
	.baseTable .icon:hover {
		color: #409EFF;
		cursor: pointer;
	}
	.green {
		color: #00cc66!important;
	}
	.blue {
		color: #1890ff!important;
	}
	.orange {
		color: #ff6600!important;
	}
	.red {
		color: #ff0000!important;
	}
	.gray {
		color: #ccc;
	}
	.baseTable span {
		user-select: none;
	}
	.lightLevel {
		color: #ccc;
	}
</style>